<style>
    #classes-detail #classes-info-wrapper {
        width: 100%;
    }

    #classes-detail .classes-info {
        display: inline-block;
        float: left;
        width: 50%;
    }

    #classes-detail .classes-other-info {
        display: inline-block;
        float: left;
        width: 100%;
    }

    #classes-detail #classes-info-wrapper {
        margin: 0 0 1rem 0;
        display: inline-block;
    }

    #classes-detail .classes-info div {
        margin: 13px 15px;
        max-width: 30rem;
    }

    #classes-detail .classes-other-info div {
        margin: 13px 15px;
        max-width: 30rem;
    }

    #classes-detail #options-wrapper a {
        padding: 4px 6px;
        color: rgba(0, 0, 0, 0.65);
        border: 1px solid #d9d9d9;
        border-radius: 2px;
    }

    #classes-detail #options-wrapper a:hover {
        color: #40a9ff;
        border-color: #40a9ff;
    }

</style>
<div class="layui-fluid" id="classes-detail" lay-title="班级信息">
    <div id="classes-info-wrapper">
        <div class="classes-info">
            <div><span class="layui-icon layui-icon-orderedlist"></span> 批次：
                [[${classes.batchName}]]
            </div>
            <div><span class="layui-icon layui-icon-home"></span> 院校：
                [[${classes.collegeName}]]
            </div>
            <div><span class="layui-icon layui-icon-unorderedlist"></span> 层次：
                [[${classes.levelName}]]
            </div>
            <div><span class="layui-icon layui-icon-book"></span> 专业：
                [[${classes.majorName}]]
            </div>
        </div>
        <div class="classes-info">
            <div><span class="layui-icon layui-icon-user"></span> 创建人：
                [[${classes.createUserName}]]
            </div>
            <div><span class="layui-icon layui-icon-time-circle"></span> 创建时间：
                [[${#strings.defaultString(createDateTime,'未显示时间')}]]
            </div>
            <div><span class="layui-icon layui-icon-user"></span> 班主任：
                [[${classes.userName}]]
            </div>
            <div><span class="layui-icon layui-icon-idcard"></span> 唯一编码：
                [[${classes.className}]]
            </div>
        </div>
        <div class="classes-other-info">
            <div><span class="layui-icon layui-icon-read"></span> 备注：
                [[${#strings.defaultString(classes.remark,'无备注')}]]
            </div>
        </div>
        <input type="hidden" id="txtDetailClassId" name="classId" data-th-value="${classes.id}">
    </div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
    <legend style="font-size: 15px; font-weight: bolder;">历史班主任</legend>
</fieldset>
<div class="layui-fluid layui-anim febs-anim" id="historyClasses" lay-title="历史班主任">
    <div class="layui-row febs-container">
        <div class="layui-col-md12">
            <table lay-filter="teacherLogTable" lay-data="{id: 'teacherLogTable'}"></table>
        </div>
    </div>
</div>

<script data-th-inline="none" type="text/javascript">
    layui.use(['jquery', 'form', 'table', 'febs'], function () {
        let $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            $view = $('#historyClasses'),
            tableIns;

        form.render();

        initTable();

        function initTable() {
            let classId = $("#txtDetailClassId").val();
            console.log(classId);
            tableIns = febs.table.init({
                elem: $view.find('table'),
                id: 'teacherLogTable',
                url: ctx + 'class/changeTeacherLog/' + classId,
                limit: 5,
                height: 330,
                cols: [[
                    {field: 'id', title: '编号'},
                    {field: 'userName', title: '班主任'},
                    {field: 'changeTime', title: '接管时间'},
                    {field: 'remark', title: '备注'}
                ]]
            });
        }

    })
</script>
